<!--
 /**
 * Author: hongChengHao
 * Date: 2022-08-11 11:05
 * Desc: 商品明细
 */
-->
<template>
  <view class="mall-detail">
    <view class="flex-b">
      <view class="b mb20">{{ title() }}</view>
      <view class="blue" @click="toDetail">查看详情</view>
    </view>
    <view class="fs24 fc8 mb30">{{ info() }}</view>
    <view v-if="couponType !== '1'" class="mall-detail__ul">
      <view class="mall-detail__li" v-for="(item, index) in arr" :key="index">
        <text class="fs24">券密码: {{ item.code }}</text>

        <view class="ml20 fc8 fs24 mt10 mb15"
          >有效期: <text>{{ item.period }}</text></view
        >
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    name: 'ComponentName',
    props: {
      arr: {
        type: Array,
        default: () => {
          return []
        }
      },
      couponType: {
        type: String,
        default: () => {
          return '1'
        }
      }
      //1卖品 2兑换 3立减
    },
    data() {
      console.log('couponType', this.couponType)
      return {}
    },
    methods: {
      title() {
        let title = '商品明细'
        switch (this.couponType) {
          case '1':
            title = '商品券信息'
            break
          case '2':
            title = '兑换券信息'
            break
          case '3':
            title = '套票立减券信息'
            break

          default:
            break
        }
        return title
      },
      info() {
        let info = '券已直接绑定账户,请至‘我的->电影券’中查看'
        switch (this.couponType) {
          case '1':
            info = '券已直接绑定账户,请至‘我的->商品券’中查看'
            break
          case '2':
            info = '券已直接绑定账户,请至‘我的->电影券’中查看'
            break
          case '3':
            info = '券已直接绑定账户,请至‘我的->套票立减券’中查看'
            break

          default:
            break
        }
        return info
      },
      toDetail() {
        console.log('toDetail')
        switch (this.couponType) {
          case '1':
            this.$tools.navigateTo('/pagesOrder/merchantsCoupon/index')
            break
          case '2':
            this.$tools.navigateTo('/pagesOrder/filmCoupon/index')
            break
          case '3':
            this.$tools.navigateTo('/pagesOrder/goodsCoupon/index')
            break

          default:
            break
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mall-detail {
    padding: 30rpx;
    background: #fff;
    &__li::before {
      content: '';
      width: 8rpx;
      height: 8rpx;
      display: inline-block;
      border-radius: 50%;
      background: #4f8eff;
      vertical-align: middle;
      margin-right: 15rpx;
    }
  }
</style>
